<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  </style>
</head>

<body>
  <!-- 写在标签内 和 标签名以一个空格分隔 => 属性(JS:属性节点) -->
  <div id="box" class="one" title="123123" data-index="1" asd="hello">123123</div>
</body>
<script>
  // DOM  

  // html + xhtml(xml)


  // HTML  对html元素进行增删改查

  // dom节点(node)
  // 文档节点     
  // 元素节点   (标签/标记/元素)
  // 属性节点   (写在标签内 和 标签名以一个空格分隔 => 属性(JS:属性节点)   => 依存于元素节点)
  // 文本节点
  // 注释节点

  // 层级关系
  // 父节点
  // 子节点
  // 同胞节点
  // 根节点


  // 元素节点的查找
  // document.getElementById()
  // document.getElementsByClassName()
  // document.getElementsByTagName()
  // document.getElementsByName()

  // parentElement.getElementsByClassName()
  // parentElement.getElementsByTagName()

  // document.querySelector()  
  // document.querySelectorAll()

  // 属性节点的查找  
  // 获取 设置 删除属性

  var box = document.getElementById("box");
  // console.log(box);
  // console.dir(box);

  // var idNode = box.getAttributeNode("id");
  // console.log(idNode);   // 属性节点  => 本质都是对象
  // console.dir(idNode);   // 打印对象的详细属性和方法
  // console.log(typeof idNode);

  console.log(box.getAttribute("id"));
  console.log(box.getAttribute("class"));
  console.log(box.getAttribute("title"));
  console.log(box.getAttribute("data-index"));
  console.log(box.getAttribute("asd"));

  box.setAttribute("id", "BOX");
  box.setAttribute("class", "ONE");

  box.removeAttribute("id");
  box.removeAttribute("class");




</script>

</html>